<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <form th:replace="common/css-js :: common-css"></form>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
        #f{
            position: absolute;
            top: -40px;
            left: 590px;
        }
    </style>
</head>

<body>
<div th:replace="common/bar :: navbar"></div>
<div th:replace="common/bar ::sidebar(activeUrl='ban')"></div>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" th:object="${page}">
    <h2 class="text-center">班级列表</h2>
    <br/>
    <div class="row">
        <a class="btn btn-primary btn-sm offset-md-1" href="#" id="add" >添加</a>
    </div>
    <div class="row">

        <div class="col-lg-6">
            <div class="input-group " id="f">
                <input type="text" class="form-control " placeholder="请输入班级" id="ban_search">
                <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="search" >搜索</button>
      </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
    <!--  <div class="table-responsive" >
          <div th:replace="common/bar ::sidebar(activeUrl='teacher')">

          </div>-->
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>#</th>
            <th>Id</th>
            <th>Name</th>
            <th>peoper</th>
            <th>course</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="ban,stat:*{records}">
            <td th:text="${stat.count}"></td>
            <td th:text="${ban.classId}"></td>
            <td th:text="${ban.className}"></td>
            <td th:text="${ban.classPeoper}"></td>
            <td th:text="${ban.course.courseName}"></td>
            <td>
                <button class="btn btn-sm btn-primary update_btn"
                        th:attr="update_url=|@{/ban/}${ban.classId}|">修改
                </button>
                <button class="btn btn-sm btn-danger del_btn"
                        th:attr="name=${ban.className},id=${ban.classId}">删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example" class="offset-4">
        <ul class="pagination">
            <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'">
                <a class="page-link" href="#" tabindex="-1" th:tabindex="*{not hasPrevious()}?'-1'"
                   th:attr="cu=1" id="2">首页</a>
            </li>
            <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'">
                <a class="page-link" href="#" tabindex="-1" th:tabindex="*{not hasPrevious()}?'-1'" th:attr="cu=@{(*{current}-1)}" id="1">上一页</a>
            </li>
            <li class="page-item" th:each="pageNum:${pageNums}" th:class="${pageNum}==*{current}?'page-item active':'page-item'">
                <a class="page-link ass"  th:attr="cu=${pageNum}"
                   th:tabindex="${pageNum}==*{current}?'-1'">
                    [[${pageNum}]]

                </a>
            </li>
            </li>
            <li class="page-item" th:class="*{hasNext()}?'page-item':'page-item disabled'">
                <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:attr="cu=@{(*{current}+1)}"  id="as">下一页</a>
            </li>
            <li class="page-item disabled" th:class="*{hasNext()}?'page-item':'page-item disabled'">
                <a class="page-link" href="#" tabindex="-1"
                   th:tabindex="*{not hasPrevious()}?'-1'"
                   th:attr="cu=@{(*{pages})}" id="3">尾页</a>
            </li>
        </ul>
    </nav>
    </div>

    <form id="delete_form" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>
</main>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 15%">
        <!-- 此处设置id属性及thymeleaf片段，用于加载后端的域数据 -->
        <div class="modal-content" id="addOrUpdate" th:fragment="addOrUpdate">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"
                    th:text="${ban!=null}?'班级修改页':'班级添加页'">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form th:action="@{/add}" id="updateForm">
                    <input type="hidden" name="_methods" th:if="${ban!=null}" value="PUT"/>
                    <input type="hidden" name="classId" th:if="${ban!=null}" th:value="${ban.classId}">
                    <div class="form-group">
                        <label for="className">Name</label>
                        <input type="text" class="form-control" id="className" placeholder="ClassName"  name="className" th:value="${ban!=null}?${ban.className}">
                    </div>
                    <div class="form-group">
                        <label for="teacherAge">Peoper</label>
                        <input type="text" class="form-control" id="teacherAge" placeholder="Peoper"  name="classPeoper" th:value="${ban!=null}?${ban.classPeoper}">
                    </div>

                    <div class="form-group">
                        <label for="courses">courses</label>
                        <select class="form-control" id="courses" name="courseId" style="height: 50px">
                            <option th:each="course:${courses}"
                                    th:text="${course.courseName}"
                                    th:value="${course.courseId}"
                                    th:selected="${ban!=null}?${ban.courseId==course.courseId}"></option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="update"
                        th:text="${ban!=null}?'修改':'添加'">Save changes</button>
            </div>
        </div>
    </div>
    <!--    <input type="hidden" id="search_Name" th:attr="name=${One}">-->
</div>


<div th:replace="common/css-js :: common-js"></div>
<script th:inline="javascript">
    let list_url=/*[[@{/ban}]]*/;
    let list_urlOne=/*[[@{/bantoadd}]]*/

        $("#add").on("click",function () {
            $("#addOrUpdate").load(list_urlOne+ " #addOrUpdate",function () {
                $("#myModal").modal({
                    keyboard: false,
                    backdrop:'static',
                    show:true
                })
            })
        })
    $("table").on("click",".update_btn",function () {
        $("#addOrUpdate").load($(this).attr("update_url") + " #addOrUpdate",function () {
            $("#myModal").modal({
                keyboard: false,
                backdrop:'static',
                show:true
            })
        });
    })
    $("body").on("click","#update",function () {
        let word = $("[name='_methods']").val()=='PUT'?'修改':'添加';
        $.ajax({
            url:$("#updateForm").attr("action"),
            type:$("[name='_methods']").val()=='PUT'?'put':'post',
            data:$("#updateForm").serialize(),
            // dataType:"json",
            success:function (res){
                // console.log(res);
                alert(word + (res?"成功":"失败"));
                location.href = list_url;

            }
        })
    })
    $("table").on("click",".del_btn",function (){
        let name = $(this).attr("name");
        let id = $(this).attr("Id");
        if(confirm("是否删除名为【"+name+"】的信息")){
            $.ajax({
                url:"/xs/ban/delete/"+id,
                type:"get",
                success:function(res){
                    alert("删除"+res);
                    window.location.reload();
                }
            })
        }
    })
    $("#search").on("click",function (){
        let name = $("#ban_search").val()
        location.href = "/xs/ban?search="+name;
    })
    $("#as").on("click",function (){
        let cu = $(this).attr("cu")
        let name = $("#search_Name").attr("name")
        location.href = "/xs/ban?search="+name+"&current="+cu;
    })
    let a = 1;
    for(a;a<=3;a++){
        $("#"+a).on("click",function (){
            let cu = $(this).attr("cu")
            let name = $("#search_Name").attr("name")
            location.href = "/xs/ban?search="+name+"&current="+cu;
        })
    }
    $("ul").on("click",".ass",function (){
        let cu = $(this).attr("cu")
        let name = $("#search_Name").attr("name")
        location.href = "/xs/ban?search="+name+"&current="+cu;
    })
</script>

</body>
</html>